<template>
  <div class="shopcar-main">
    <nav-bar></nav-bar>
    <div class="carlist"
         v-for="(item,index) in carlist"
         :key="index">

      <van-checkbox class="box"
                    v-model="item.check"
                    name="a"></van-checkbox>

      <van-swipe-cell class="card">

        <van-card :num="item.number"
                  :price="item.retail_price"
                  :title="item.goods_name"
                  class="goods-card"
                  :thumb="item.list_pic_url" />
        <template #right>
          <van-button square
                      text="删除"
                      type="danger"
                      @click="delPro(item.id)"
                      class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    <div class="sub">
      <van-submit-bar :price="total"
                      button-text="提交订单"
                      @submit="onSubmit">
        <van-checkbox v-model="checkall">全选</van-checkbox>

      </van-submit-bar>
    </div>

  </div>
</template>

<script>
import NavBar from "../../views/home/goodsdetail/Nav"
import { mapActions, mapState } from "vuex"
// import { get } from '@/utils';
export default {
  name: "ShopCarIndex",
  components: {
    NavBar
  },
  data () {
    return {
      carlist: this.$store.state.shopCar,
      allcheck: true
    };
  },
  computed: {
    checkall: {
      get: function () {
        return this.carlist.every(item => item.check)
      },
      set: function (val) {
        this.carlist.forEach(el => {
          el.check = val
        })
      }
    },
    total () {
      return this.carlist.reduce((pr, nx) => {
        
        if (nx.check) {
          return (pr + nx.number * nx.retail_price*100)
        }else{
          return pr
        }
       


      }, 0)
    }
  },
  created () {
    this.$store.dispatch("getShopcar")
  },
  mounted () {

  },
  methods: {
    onSubmit () {

    },
 delPro(val){
      this.$store.dispatch("delPro",val)
      location.reload()

    }
  },
};
</script>

<style scoped lang="scss">
.shopcar-main {
  .carlist {
    display: flex;
    .box {
      width: 20px;
      margin-left: 4px;
    }
    .card {
      width: calc(100vw - 20px);
      .goods-card {
        margin: 0;
        background-color: white;
      }

      .delete-button {
        height: 100%;
      }
    }
  }
  .sub {
    margin-bottom: 50px;
    /deep/.van-submit-bar {
      bottom: 50px;
    }
  }
}
</style>
